<template>
  <!-- 页面-分配角色 -->
  <div class="dimension-assign-user">
    <InnerPageTable ref="roleTable" :config="tableConfig">
      <div slot="table-bar">
        <div class="table-bar-solt">
          <div class="table-bar-button">
            <RPButton optType="common" :text="$t('module.role.assignRole')" @click="assignRole" />
            <RPButton optType="batch" @click="deleted()" />
          </div>
          <div class="table-bar-input input_color">
            <Input
              v-model="searchForm.nameOrCode"
              :placeholder="$t('module.dataPermission.searchRole')"
              icon="ios-search"
              small
              @on-enter="onSearch"
              @on-click="onSearch"
            />
          </div>
        </div>
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import dataPermissionAPI from '@/api/dataPermissionAPI.js'
import { assignRoleColumns } from './columns.js'
import DimensionSelectRole from './DimensionSelectRole.vue'
import locales from './locales.js'

export default {
  mixins: [locales],
  components: {},
  props: {
    tenantCode: { type: String, required: true },
    dimensionId: { type: String, required: true }
  },
  data() {
    return {
      searchForm: {
        tenantCode: this.tenantCode,
        policyDimensionRelId: this.dimensionId,
        nameOrCode: ''
      }
    }
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: ({ responseProcess, param }) => {
          dataPermissionAPI.queryAssignedRole(param).then(data => {
            responseProcess(data)
          })
        },
        initParam: this.searchForm,
        columnsFn: assignRoleColumns.bind(this),
        autoFirst: true,
        rowClickHandle: this.onRowClick,
        highlightRow: true,
        rowClassNameFn: this.rowClassName // 自定义行样式
      }
    }
  },
  created: function() {},
  mounted: function() {},
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //enabled:1-有效，0-无效
      if (row.enabled == 0) {
        return 'tableDisableStyle'
      }
    },
    search(page = 1) {
      // 搜索name或者code
      this.$refs['roleTable'].load(this.searchForm, page)
    },
    assignRole() {
      new this.$pageModal(
        DimensionSelectRole,
        {
          props: {
            tenantCode: this.tenantCode,
            dimensionId: this.dimensionId
          }
        },
        data => {
          data && this.search()
        }
      )
    },
    deleted(id) {
      let selectedIds
      if (id) {
        selectedIds = [id]
      } else {
        selectedIds = this.getSelectedIds()
        if (selectedIds.length == 0) {
          this.$message.error(this.$t('module.role.warning.selectRole'))
          return
        }
      }
      new $confirm(this.$t('module.dataPermission.warning.confirmDeleteAssignedRole'), this).then(() => {
        dataPermissionAPI.deleteAssignedRole(selectedIds).then(res => {
          this.$message.success({
            content: this.$t('module.orgManage.deleteSuccess'),
            duration: 3
          })
          // 刷新权限数据
          this.$emit('change', null)
          this.search()
        })
      })
    },
    getSelectedIds() {
      let list = this.$refs['roleTable'].getSelectioned() || []
      let ids = []
      for (let { id } of list) {
        ids.push(id)
      }
      return ids
    },
    onRowClick(data) {
      this.$emit('change', data.id)
    },
    onSearch() {
      this.search()
    }
  },
  watch: {},
  directives: {}
}
</script>
<style lang="less">
.dimension-assign-user {
  height: 100%;

  .table-bar-solt {
    display: flex;
    justify-content: space-between;

    .table-bar-button {
      display: flex;
    }

    .table-bar-input {
      width: 60%;
    }

    .input_color {
      .ivu-input-inner-container {
        input {
          color: #515a6e;
        }
      }
    }
  }

  .input-search {
    z-index: 99;
    float: right;
    width: 200px;

    input {
      color: #515a6e;
    }
  }
}
</style>
